Hi , 我是 Rosa Hong,這是我第一次參加鐵人賽,報名時想了很久,決定先報自我挑戰組嘗試看看。去年我開始自學前端技術,很多大神的鐵人賽的文章一直都是我的隱藏老師,在收穫滿滿之餘,也希望自己能有一天能成為鐵人賽的參加者,今年下定決心來報名。
期許自己參加不只是記錄學習,也在寫文方面能夠進步,不只是吸收者,而是成為知識的輸出者。
參賽前有想過其他主題,像是我很想學習的 Vue 、TypeScript 以及 P5.js 等等,太想學習的實在太多,考慮自己沒辦法在短期內邊學習之際又有架構的產出一系列文章,尤其自己的學習習慣很容易糾結在某個點專研,30 天反而會變成 「我只是想參加完」這樣的心態打流水仗,於是選擇預先規劃較完整的動畫為主題。
動畫一直是我覺得最為神秘的技術,能達到動畫的手法可能有 :
身為新手,也想做出網路上各種漂亮的網頁?,但 :
(特地製作了一張嘲諷自己)
當我開開心心做出一個具有功能的網頁,一直覺得好像少了什麼。同時學習框架與 JS 基礎還有一堆生態圈衍生 library 的要學,我的大腦已經超載 ,要我再加上精雕細琢的動畫,皮諾可請直接電死我。
當然 CSS Animation 基礎還是要會,這是動畫的根基。但動畫難的不是它的很難學難懂,而是要大費周章的時間處理。不能否認一項藝術創作的背後需要花費的心力與時間,所以人類才會使用工具幫助自己快速達成目標,在現代開發則透過各種套件來快速達到動畫效果,例如 : GASP 、Three.js 等等,再進一步搭配上各種框架與生態圈都衍生出一系列處理動畫的 library 。
由於前端御三家中 React 是我第一個學習的,所以我都會以 React 生態系作為出發點。
在 React Animation 相關的 library 比較多星的有 :
截至 2022 年 9 月三者下載量數據 :
framer motion 可以說是後起之秀。我第一次知道 framer motion 是從 Takuya Matsuyama 的影片 ,順便認識了 Chakra UI ,讓我對這兩個工具充滿好奇。
那 framer motion 究竟為什麼可以這麼快速竄起呢 ?
framer motion 是 Framer 跟 motion API 所組合而成,其簡介是 :
就整體來說主打 迅速跟簡單上手。
再看看 motion API 官方特色,基本上應有盡有 :
motionValue
: 客製化動畫值useSpring
具有 Spring Animation在開發應用上也可以到 官方的範例 看能做到哪些效果,不只元素區塊的動畫,也包含 SVG 與 3D,不過我最常看見的是 Unmount 動畫應用在頁面轉場,轉場多重要呢 ? 可以參考今年的 Google I/O 釋出 Page Transitions 新特色。
在設計工具方面,Framer 跟 Figma 長的很像,官方也有推出 Figma + Framer 的整合工具,也就是可以在 Figma 設計到 Framer 發布/轉成 html 或展示原型。
framer motion 的崛起,我想也要歸功於勤奮更新與越來越完善的 API ,另外令我最好奇的是 官方 beta 的功能 ,就是使用 import 就能載入 framer 設計好的元件,並且可以發布到 npm,在未來或許動畫再也不是開發者的噩夢之一了。
我想再次強調 新手友善 的問題
<motion.div>
就可以開始做動畫 ,基本上會有不錯的 Spring 動畫身為新手而言,降低接觸門檻是第一步,如果連認識都很困難了,更不用談想繼續學習的動力。新手肯定遇過這個難題 : 一開始要學 React 、 Vue 還是 Angular ? 我會說,哪個試過你覺得最想繼續學就去學那個吧。
並不會特別講 React 基本概念,以下是估計會用到知識部分
目前劃分幾個主題 :
接下來一個月請多指教啦 :D